<!--
## 12、Vue：v-if&v-show

> 目标: 掌握如何控制html元素显示或隐藏

- v-if: 控制html元素是显示还是隐藏(true:显示、false:隐藏)
  语法：<html标签名 v-if=”true|false”></html标签名>

- v-show: 控制html元素是显示还是隐藏(true:显示、false:隐藏)
  语法：<html标签名 v-show=”true|false”></html标签名>
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs显示与隐藏</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <div v-if="flag">我可是div层一</div>
    <div v-show="flag">我可是div层二</div>
    <input type="button" @click="toggle()" value="开关"/>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {
            toggle: function () {
                this.flag = !this.flag;
            }
        }
    });
</script>
</body>
</html>